<template>
	<div class="page-main match-parent">
		<div class="main">
			<router-view v-slot="{ Component }">
				<keep-alive>
					<component :is="Component"/>
				</keep-alive>
			</router-view>
		</div>
		<div class="bottom">
			<bottom-btn v-for="(item,index) in items"
			            :key="index"
			            :text="item.text"
			            :img-tag="item.imgTag"
			            :ref="el=>btnRefs[index]=el"
			            @click="tabClick(index)"/>
		</div>
	</div>
</template>

<script>
    import BottomButton from '/src/components/main/BottomButton'
    import {ref, onMounted} from 'vue'
    import {useRouter, onBeforeRouteUpdate} from 'vue-router'

    export default {
        name: "Main",
        components: {
            'bottom-btn': BottomButton
        },
        setup() {
            const router = useRouter()
            const btnRefs = ref([])
            const items = [
                {
                    text: '首页', imgTag: 'home', route: '/main/home'
                },
                {
                    text: '动态', imgTag: 'near', route: '/main/active'
                },
                {
                    text: '商城', imgTag: 'shop', route: '/main/shop'
                },
                {
                    text: '我的', imgTag: 'me', route: '/main/me'
                }
            ]
            onBeforeRouteUpdate((to) => {
                items.forEach((item, index) => {
                    btnRefs.value[index].toggle(to.path === item.route)
                })
            })
            onMounted(() => {
                router.replace('/main/home')
            })
            const tabClick = (index) => {
                router.replace(items[index].route)
            }
            return {
                btnRefs,
                items,
                tabClick
            }
        }
    }
</script>

<style lang="less" scoped>
	@import "/src/utils/style/color.less";
	.page-main {
		position: relative;
	}
	
	.main {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 50px;
	}
	
	.bottom {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 50px;
		display: flex;
		flex-direction: row;
		border-top: 1px solid @gray2;
	}


</style>
